<template>
  <div class="request-demo">
    <h2>网络请求工具演示</h2>

    <div class="demo-section">
      <h3>基础 GET 请求</h3>
      <div class="demo-controls">
        <Button type="primary" @click="testGetRequest" :disabled="loading">
          {{ loading ? '请求中...' : '发送 GET 请求' }}
        </Button>
      </div>
      <div v-if="getResponse" class="response-box">
        <pre>{{ JSON.stringify(getResponse, null, 2) }}</pre>
      </div>
    </div>

    <div class="demo-section">
      <h3>POST 请求</h3>
      <div class="demo-controls">
        <input v-model="postData.title" placeholder="标题" class="demo-input">
        <input v-model="postData.body" placeholder="内容" class="demo-input">
        <Button type="success" @click="testPostRequest" :disabled="loading">
          {{ loading ? '提交中...' : '发送 POST 请求' }}
        </Button>
      </div>
      <div v-if="postResponse" class="response-box">
        <pre>{{ JSON.stringify(postResponse, null, 2) }}</pre>
      </div>
    </div>

    <div class="demo-section">
      <h3>PUT 请求</h3>
      <div class="demo-controls">
        <input v-model="putData.id" type="number" placeholder="ID" class="demo-input">
        <input v-model="putData.title" placeholder="新标题" class="demo-input">
        <Button type="warning" @click="testPutRequest" :disabled="loading">
          {{ loading ? '更新中...' : '发送 PUT 请求' }}
        </Button>
      </div>
      <div v-if="putResponse" class="response-box">
        <pre>{{ JSON.stringify(putResponse, null, 2) }}</pre>
      </div>
    </div>

    <div class="demo-section">
      <h3>DELETE 请求</h3>
      <div class="demo-controls">
        <input v-model="deleteId" type="number" placeholder="要删除的 ID" class="demo-input">
        <Button type="danger" @click="testDeleteRequest" :disabled="loading">
          {{ loading ? '删除中...' : '发送 DELETE 请求' }}
        </Button>
      </div>
      <div v-if="deleteResponse" class="response-box">
        <pre>{{ JSON.stringify(deleteResponse, null, 2) }}</pre>
      </div>
    </div>

    <div class="demo-section">
      <h3>带参数的 GET 请求</h3>
      <div class="demo-controls">
        <input v-model="queryParams.userId" type="number" placeholder="用户 ID" class="demo-input">
        <input v-model="queryParams.limit" type="number" placeholder="限制数量" class="demo-input">
        <Button type="info" @click="testGetWithParams" :disabled="loading">
          {{ loading ? '请求中...' : '发送带参数请求' }}
        </Button>
      </div>
      <div v-if="paramsResponse" class="response-box">
        <pre>{{ JSON.stringify(paramsResponse, null, 2) }}</pre>
      </div>
    </div>

    <div v-if="error" class="error-box">
      <strong>错误：</strong> {{ error }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { request } from '../utils'
import Button from './Button/Button.vue'

// 状态管理
const loading = ref(false)
const error = ref(null)

// 响应数据
const getResponse = ref(null)
const postResponse = ref(null)
const putResponse = ref(null)
const deleteResponse = ref(null)
const paramsResponse = ref(null)

// 表单数据
const postData = ref({
  title: '测试标题',
  body: '测试内容'
})

const putData = ref({
  id: 1,
  title: '更新的标题'
})

const deleteId = ref(1)

const queryParams = ref({
  userId: 1,
  limit: 5
})

// 创建自定义请求实例（使用公共 API 测试）
const api = new (await import('../utils')).Request({
  baseURL: 'https://jsonplaceholder.typicode.com'
})

// 测试 GET 请求
const testGetRequest = async () => {
  loading.value = true
  error.value = null
  getResponse.value = null

  try {
    const response = await api.get('/posts/1')
    getResponse.value = response.data
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

// 测试 POST 请求
const testPostRequest = async () => {
  loading.value = true
  error.value = null
  postResponse.value = null

  try {
    const response = await api.post('/posts', {
      title: postData.value.title,
      body: postData.value.body,
      userId: 1
    })
    postResponse.value = response.data
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

// 测试 PUT 请求
const testPutRequest = async () => {
  loading.value = true
  error.value = null
  putResponse.value = null

  try {
    const response = await api.put(`/posts/${putData.value.id}`, {
      title: putData.value.title,
      body: '更新的内容',
      userId: 1
    })
    putResponse.value = response.data
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

// 测试 DELETE 请求
const testDeleteRequest = async () => {
  loading.value = true
  error.value = null
  deleteResponse.value = null

  try {
    const response = await api.delete(`/posts/${deleteId.value}`)
    deleteResponse.value = { message: '删除成功', data: response.data }
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

// 测试带参数的 GET 请求
const testGetWithParams = async () => {
  loading.value = true
  error.value = null
  paramsResponse.value = null

  try {
    const response = await api.get('/posts', {
      params: {
        userId: queryParams.value.userId,
        _limit: queryParams.value.limit
      }
    })
    paramsResponse.value = response.data
  } catch (err) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.request-demo {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

h2 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 30px;
  text-align: center;
}

.demo-section {
  margin-bottom: 40px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
}

.demo-section h3 {
  font-size: 18px;
  color: #606266;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.demo-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.demo-input {
  flex: 1;
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
}

.demo-input:focus {
  border-color: #409eff;
}

.response-box {
  margin-top: 15px;
  padding: 15px;
  background: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  max-height: 300px;
  overflow: auto;
}

.response-box pre {
  margin: 0;
  font-size: 12px;
  color: #303133;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.error-box {
  padding: 15px;
  background: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  color: #f56c6c;
  margin-top: 20px;
}
</style>

